import type { InputSize } from "@/components/Input";
import Input from "@/components/Input";
import Panel from "@/components/Panel";

const sizes: InputSize[] = ["sm", "md", "lg"];

export default function Inputs() {
  return (
    <Panel class="bg-white">
      {{
        title: () => "Inputs",
        default: () => (
          <div class="flex flex-col gap-4">
            <div class="flex gap-4 ">
              {sizes.map((size) => (
                <Input size={size} key={size} placeholder={size} />
              ))}
            </div>
          </div>
        ),
      }}
    </Panel>
  );
}
